<template>
  <div>
    <div style="margin-top: 20px;padding: 20px;background-color: #FFFFFF">
      <a-form-model ref="ruleForm" layout="inline" :model="form">
        <div class="mode_item">
          <a-form-model-item label="模型名称" prop="modelName">
            <a-input v-model="form.modelName" placeholder="请输入"/>
          </a-form-model-item>
          <a-form-model-item label="训练状态" prop="trainStatus">
            <a-select v-model="form.trainStatus" style="width: 120px" placeholder="请选择">
              <a-select-option value="">
                全部
              </a-select-option>
              <a-select-option value="0">
                待开始
              </a-select-option>
              <a-select-option value="1">
                训练中
              </a-select-option>
              <a-select-option value="2">
                已完成
              </a-select-option>

            </a-select>
          </a-form-model-item>
          <a-form-model-item label="完成时间" class="zdy-form-item-label">
            <a-radio-group buttonStyle="solid" v-model="form.captchaTimeType">
              <a-radio-button v-for="(item, key) in options" :key="key" :value="item.value">
                {{ item.text }}
              </a-radio-button>
            </a-radio-group>
            <a-date-picker
              v-if="form.captchaTimeType === '0'"
              v-model="form.completionTime"
              show-time
              type="date"
              placeholder="请选择时间"
              style="margin-left: 10px"
              @change="onChange1"
            />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
            <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询</a-button>
            <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置</a-button>
          </a-form-model-item>
        </div>
      </a-form-model>

    </div>
    <div style="margin-top: 20px;padding: 20px;background-color: #FFFFFF">
      <div style="padding-bottom: 15px">
        <!--          <a-button @click="showModal">导入</a-button>-->
        <a-button type="primary" @click="manageBtn">模型训练</a-button>
        <!--          <a-button type="primary" style="margin-left: 10px;" @click="upload">事件上报</a-button>-->
      </div>
      <custom-table
        ref="table"
        :showAlert="false"
        :columns="columns"
        :dataSource="pageData"
        :showSelection="false"
        :showPagination="true"
        rowKey="warningEvtid"
        :loading="loading"
        @change="onTableChange"
      >
        <template slot="file" slot-scope="text, record">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.file)" />
          </div>
        </template>
        <template slot="trainStatus" slot-scope="text, record">
          <span v-if="text === '0'">待开始</span>
          <span v-if="text === '1'">训练中</span>
          <span v-if="text === '2'" style="color: #03c016">已完成</span>
        </template>
        <template slot="completionTime" slot-scope="text, record">
          <span v-if="!record.completionTime">--</span>
          <span v-else>{{text}}</span>
        </template>
      </custom-table>
    </div>
    <a-modal v-model="visible" title="模型训练" @ok="handleOk" @cancel="handleCancel" width="600px" centered>
      <a-form-model ref="ruleForm1" :model="form1" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
        <div>
          <a-form-model-item label="选择要训练的模型" prop="select">
            <a-select
              v-model="form1.select"
              placeholder="请选择"
              @change="handleChange"
            >
              <a-select-option v-for="(item,index) of options1" :key="index" :value="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="训练开始时间" prop="date">
            <a-date-picker
              v-model="form1.date"
              show-time
              type="date"
              placeholder="请选择时间"
              style="width: 100%;"
              @change="onChange1"
            />
          </a-form-model-item>
          <a-form-model-item label="图片上传" prop="file">
            <j-image-upload class="avatar-uploader" text="上传" v-model="form1.file" :isMultiple="false"></j-image-upload>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import {sysCaptchaEngineAdd, sysCaptchaEngineList} from "@api/smuggle/intercalate";
import JImageUpload from '@/components/jeecg/JImageUpload'
import {getFileAccessHttpUrl} from "@api/manage";
export default {
  name: "index",
  components: { CustomTable,JImageUpload },
  data(){
    return {
      visible:false,
      rangePickerTime: [],
      form:{
        captchaTimeType: 0,
        completionTime: "",
        id: "",
        modelName: "",
        sorter: "",
        startTime: "",
        trainStatus: ""
      },
      form1:{
        select:undefined,
        date:undefined,
        file:undefined
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      rules: {
        select: [{ required: true, message: '请选择要训练的模型', trigger: 'blur' }],
        date: [{ required: true, message: '请输入时间', trigger: 'change' }],
        file: [{ required: true, message: '请选择要上传的图片', trigger: 'change' }],
      },
      options: [
        { value: '2', text: '今天' },
        { value: '1', text: '昨天' },
        { value: '3', text: '近三天' },
        { value: '4', text: '近七天' },
        { value: '0', text: '自定义' }
      ],
      options1:[
        { value: '找出汉字验证码', text: '找出汉字验证码' },
        { value: '汉字输入验证码', text: '汉字输入验证码' },
        { value: '点选验证码', text: '点选验证码' },
        { value: '滑动验证码', text: '滑动验证码' },
        { value: '滑块拼接验证码', text: '滑块拼接验证码' }
      ],
      columns: [
        {
          title: '模型名称',
          dataIndex: 'modelName',

          align: 'center',
          scopedSlots: { customRender: 'modelName' }
        },
        {
          title: '模型图片',
          align: "center",
          width: 120,
          dataIndex: 'file',
          scopedSlots: {customRender: "file"}
        },
        {
          title: '开始时间',
          align: 'center',
          dataIndex: 'startTime',
          scopedSlots: { customRender: 'startTime' }
        },
        {
          title: '完成时间',
          align: 'center',
          dataIndex: 'completionTime',
          scopedSlots: { customRender: 'completionTime' }
        },
        {
          title: '训练状态',
          align: 'center',
          dataIndex: 'trainStatus',
          scopedSlots: { customRender: 'trainStatus' }
        },
      ],
      pageData: {},
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pass:undefined
    }
  },
  mounted() {
    this.refreshTable(this.pageFilter)
  },
  watch:{
    form:{
      deep:true,
      handler(a,b){
        this.pageFilter.pageNo = 1
      }
    }
  },
  methods:{
    getAvatarView: function (avatar) {
      return getFileAccessHttpUrl(avatar)
    },
    submitForm() {
      this.$refs.ruleForm1.validate(valid => {
        console.log(valid)
        // this.passCheck = valid
        this.pass = valid
      });
    },
    onQuery(){
      console.log(this.form);
      this.refreshTable(Object.assign({},this.form,this.pageData))
    },
    onResetForm(){
      this.form.captchaTimeType = 0
      this.$refs.ruleForm.resetFields();
      this.refreshTable()
    },
    handleCancel(){
      // alert(6)
      this.$refs.ruleForm1.resetFields();
      this.form1.select = []
    },
    manageBtn(){
      this.visible = true
    },
    handleOk(e){
      this.submitForm()
      if(!this.pass){
        this.$message.warn('请检查你的数据')
        // this.$message.warn(this.pass)
      } else {
        console.log(this.form1)
        let data = {
          modelName:this.form1.select,
          startTime:this.form1.date,
          file:this.form1.file
        }
        // console.log(data)
        // this.$refs.ruleForm1.resetFields();
        sysCaptchaEngineAdd(data).then(ser => {
          if(ser.success){
            this.$message.success('添加成功', 2,);
            this.visible = false
            this.refreshTable(this.pageFilter)
            this.handleCancel()
          } else {
            this.$message.warn('添加失败！')
          }
        }).catch(err => {
          this.$message.warn('添加失败！')
        })
      }

    },
    refreshTable(val){
      let formData = Object.assign({}, this.form, this.pageFilter)
      sysCaptchaEngineList(formData).then(ser => {
        console.log(ser)
        if(ser.success){
          this.pageData = ser.result
        }
      }).catch(err => {

      })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      // this.refreshTable(this.pageFilter)
      this.refreshTable(Object.assign({},this.form,this.pageData))
    },
    rangePickerChange(date) {
      this.$set(this.form, 'completionTime', date[0])
      this.$set(this.form, 'completionTime', date[1])
    },

    handleChange(value) {
      console.log(`selected ${value}`);
    },
    onChange1(date, dateString) {
      console.log(date, dateString);
      this.form1.date = dateString
    },
  }
}
</script>

<style scoped>
/deep/.ant-select-selection--single{
  width: 200px!important;
}
.mode_item > *{
  margin-right: 120px;
}
.avatar-uploader > .ant-upload {
  width:104px;
  height:104px;
}
/deep/.ant-avatar{
  width: 55px;
  height: 45px;
  margin-top: -9px;
}
</style>